<template>
  <div>
    <!-- 1.0 4个小卡片 -->
    <Card :list="cardList" />

    <!-- <Msg /> -->
    <!-- 2.0 展示的折线图 -->
    <LineCard @son="fn" />
  </div>
</template>

<script>
import Card from './components/card.vue'
import LineCard from './components/LineCard.vue'
import { getHomeData } from '@/api/charts.js'

export default {
  components: {
    Card,
    LineCard
  },
  data() {
    return {
      cardList: [
        {
          id: 1,
          name: 'totalOrder',
          icon: 'icon-wenjian',
          text: '总订单',
          num: '102,400',
          color: '#1296db',
          url: require('../../assets/images/logo.jpg')
        },
        {
          id: 2,
          name: 'totalAmount',
          icon: 'icon-Dollar',
          text: '总销售额',
          num: '102,400',
          color: '#d4237a',
          url:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 3,
          name: 'todayOrder',
          icon: 'icon-renwu',
          text: '今日订单数',
          num: '102,400',
          color: '#1296db',
          url:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 4,
          name: 'totayAmount',
          icon: 'icon-renminbi',
          text: '今日销售额',
          num: '102,400',
          color: '#1afa29',
          url:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
      ],
      sonData: {}
    }
  },
  created() {
    this.getDatas()
  },
  methods: {
    fn(o) {
      // 这里只存数据
      this.sonData = o
    },
    async getDatas() {
      const data = await getHomeData()
      // console.log(data)

      // 把请求回来的数据，对应设置给卡片
      this.cardList.forEach(item => {
        item.num = data[item.name]
      })

      // 给options赋值
      const aaa = this.sonData
      aaa.option.xAxis[0].data = data.xData
      aaa.option.series[0].data = data.orderData
      aaa.option.series[1].data = data.amountData
      aaa.myChart.setOption(aaa.option)
    }
  }
}
</script>

<style lang="less" scoped></style>
